<template>
  <div>

	<section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container"><a class="navbar-brand" href="index.html"><i class="fas fa-shopping-bag primary-color mr-1"></i>美多商城</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shop </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">Women's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Men's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Girl's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Boy's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="../assets/images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="../assets/images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">Homepage</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">Catalog</a>
								<a class="dropdown-item" href="item.html">Item Detail</a>
								<a class="dropdown-item" href="cart.html">Cart</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">Contact</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
					<li class="nav-item dropdown"><input type="text" /></li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>3 Items <span class="emphasis">$147.00</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img src="../assets/images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="../assets/images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="../assets/images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</section>
	

	<section class="products text-center">
		<div class="container">
			

			<textarea v-model="content">  </textarea>

			<br /><br />

			<Button  color="blue" @click="comment" >开始评论</Button>


			<comments :commentlist="this.commentlist" :myuser="this.myuser"></comments>


			<!-- <ul>
				
				<li v-for="item in commentlist">

					{{ item.uid | myfilter }}:{{ item.content }}
					
				</li>


			</ul>
 -->

		</div>
	</section>
	
	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">{{ name }}</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/' + img"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
						<video :src="'http://localhost:8000/static/upload/' + video"></video>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">${{ price }}</span></p>
				</div>
			</div>
			<div v-if="user_flow">
			<button @click="flows">已关注</button>
			</div>
			<div v-else>
			<button @click="flows">关注</button>
			</div>
		</div>
	</section>
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>	
    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';
import comments from './comments.vue';

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  id: '',
	  name: '',
	  desc: '',
	  img: '',
	  param: '',
	  cid: '',
	  video: '',
	  flow: '',
	  price: '',
	  comment_list: '',
	  
      //评论内容
      content:'',
      //评论列表容器
	  comment_list: [],
      //用户信息字典
      myuser:{}

	  
    }
  },
  mounted:function(){
	  this.get_goods_list()
	  this.get_goodflow()
	  this.get_flow()

   
  
},
  methods:{
	  
        get_goods_list(){
            let gid=this.$route.query.gid
			this.axios.get('http://127.0.0.1:8000/goodshow/',{params:{
			gid: gid}}).then((result)=>{
					console.log(result.data);
					let good_msg = result.data.res[0]
					
					this.id = good_msg.id
					this.name = good_msg.name
					this.desc = good_msg.desc
					this.img = good_msg.img
					this.param = good_msg.param
					this.cid = good_msg.cid
					this.video = good_msg.video
					this.flow = good_msg.flow
					this.price = good_msg.price
                })

		},
		// 获取商品评论
		get_comments(){
			let gid=this.$route.query.gid
			this.axios.get('http://127.0.0.1:8000/showcomment/',{params:{
			gid: gid}}).then((result)=>{
					console.log(result.data);
					if(result.data.comments){
						this.comment_list = result.data.comments
					}
                })

		},
		
		// 获取关注商品用户接口
		get_goodflow(){
		this.axios({
			url: config['baseurl'] + 'goodflow/',
			params:{
			gid: this.gid,
			}
		}).then(resp=>{
			console.log(resp);
			// 获取该商品关注总数量
			this.sum_flow = resp.data.length;
			// 赋值
			this.flow_list = resp.data
			
		})
		},
		get_flow(){
			this.axios.get('http://127.0.0.1:8000/userinfo/',{params:{
			uid: localStorage['uid']}}).then((result)=>{
					console.log(result.data);
                })
		},
		// 关注与取消
		flows(){

		}

     
  },
  
  //自定义过滤器
  filters:{

  		//自定义方法
  		myfilter:function(value){

  				//通过key(用户id)取用户名
  				return window.that.myuser[value];

  		}

  },
  
//   //注册组件标签
  
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
	  'comments':comments
  }
}


</script>
 
<style>



</style>